<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {SupplyAndDemand} from "@/api/commodity/commodity";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.showSupplyAndDemand()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    showSupplyAndDemand() {
      let showSupplyAndDemand = echarts.init(this.$el, 'macarons');

      SupplyAndDemand().then(response => {
        let array = response.data;

        let names = [];
        let pquantitys = [];
        let squantitys = [];
        for (let i in array) {
          names.push(array[i].name);
          pquantitys.push(array[i].pquantity);
          squantitys.push(array[i].squantity);
        }


        showSupplyAndDemand.setOption({
          title: {
            text: '商品进出货对比统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params) {
              // 获取第一个参数（即当前悬停的点）的名称
              let name = params[0].name;
              // 初始化一个对象来存储不同系列的数据
              let data = {};
              params.forEach(param => {
                data[param.seriesName] = param.value;
              });
              return `${name}<br/>产品进货量: ${data['产品进货量']}<br/>商品出货量: ${data['商品出货量']}`;
            }
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          xAxis: {
            type: 'category',
            data: names,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              rotate: 45
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          legend: {
            left: 'center',
            bottom: '10',
            type: 'scroll',
            max: 5,
            data: ['产品进货量', '商品出货量']
          },
          series: [
            {
              name: '产品进货量',
              type: 'bar',
              data: pquantitys,
              animationEasing: 'cubicInOut',
              animationDuration: 2600
            },
            {
              name: '商品出货量',
              type: 'bar',
              data: squantitys,
              animationEasing: 'cubicInOut',
              animationDuration: 2600
            }
          ],
          dataZoom: [ // 添加dataZoom组件
            {
              type: 'inside',
              start: 0,
              end: 100,
              minSpan: 2 / names.length * 100,
              realtime: true,
              filterMode: 'empty'
            }
          ]
        });
      });
    }
  }
}
</script>
